<!-- 工作量统计表 -->
<template>
  <div class="mod-config">
    <el-divider content-position="left">查询条件</el-divider>
    <el-form label-width="80px">
      <el-row class="bg-row">
        <el-form-item label="查询分类">
          <el-radio-group v-model="spreadData.classify">
              <el-radio label="1">营业员</el-radio>
              <!-- <el-radio label="2">收银员</el-radio> -->
              <el-radio label="3">验光师</el-radio>
            </el-radio-group>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-col :span="12">
          <el-form-item label="查询方式">
            <el-radio-group v-model="spreadData.mode">
                <el-radio label="1">按部门</el-radio>
                <el-radio label="2">按人员</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="查看方式">
            <el-radio-group v-model="spreadData.checkType">
              <el-radio label="1">按数据列表</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="所属公司" v-if="[1,21,23].includes(userInfo.lessDeptId)">
          <el-select style="width: 175px;" v-model="spreadData.unitId" @change="unitChangeHandle">
            <el-option v-for="item in companyOption" :value="item.id" :label="item.name" :key='item.id'></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属公司" v-else>
          <el-select style="width: 175px;" v-model="spreadData.unitId" disabled>
            <el-option v-for="item in companyOption" :value="item.id" :label="item.name" :key='item.id'></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-col :span="9">
          <el-form-item label="查询部门">
            <el-input v-model="spreadData.deptName" v-if="userInfo.lessDeptId != '23'" disabled style="width: 175px;"></el-input>
            <el-input type="textarea" v-model="spreadData.deptName" v-if="[1,21,23].includes(userInfo.lessDeptId)"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0" v-if="[1,21,23].includes(userInfo.lessDeptId)">
            <el-button @click="openDeptDialog">选择</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="查询日期">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.beginTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2" style="text-align: center;">至</el-col>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="dataForm.endTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row class="bg-row">
        <el-form-item label="人员工号">
          <el-input style="width: 175px;" v-model="dataForm.salerUserId"></el-input>
        </el-form-item>
      </el-row>
      <el-row class="bg-row">
        <el-col :span="12">
          <el-form-item label="显示查询条件" label-width="100px">
            <el-radio-group v-model="spreadData.condition">
                <el-radio label="1">是</el-radio>
                <el-radio label="2">否</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px;">
        <el-form-item label-width="5px">
          <el-link :href="printUrl" target="_blank" type="primary"><el-button type="primary" @click="getWorkParams" v-prevent-re-click>查 询</el-button></el-link>
          <el-button type="info" icon="el-icon-delete" style="margin-left: 15px;">清 空</el-button>
        </el-form-item>
      </el-row>
    </el-form>
    <search-dept v-if="deptVisible" ref="deptDialog" @refreshData="getDeptData" :company="this.spreadData.unitId"></search-dept>
  </div>
</template>

<script>
  let params = '/work/saleByUser.cpt'
  import { getDateFormat } from '@/util/tools'
  import { filterParams } from '@/util/tools'
  import { mapGetters } from 'Vuex'

  //  查询公司列表
  import { unitList } from '@/api/admin/unit'
  import { getDeptPage } from '@/api/admin/dept'


  import SearchDept from '@/components/business/SearchDept'


  export default {
      data () {
        return {
          radio: 3,
          printUrl: '',
          companyOption: [],
          spreadData: {
            classify: '1',    //  查询分类
            mode: '2',        //  查询方式
            checkType: '1',   //  查看方式
            unitId: '',      //  所属公司
            deptName: '',     //  查询部门Name
            condition: '2',    //  是否显示查询条件
          },
          dataForm: {
            deptId: '',       //  查询部门ID
            beginTime: '',    //  查询开始时间
            endTime: '',      //  查询结束时间
            jobNumber: '',    //  工号
          },
          deptVisible: false
        }
      },
      components: {
        SearchDept
      },
      computed: {
        ...mapGetters(['userInfo','bizData'])
      },
      created() {
        this.dataForm.beginTime = getDateFormat(new Date())
        this.dataForm.endTime = getDateFormat(new Date())
        this.getCompanyList()
        this.spreadData.unitId = this.userInfo.unitId
        this.spreadData.deptId = [this.userInfo.lessDeptId]
        this.spreadData.deptName = this.userInfo.lessDeptName
      },
      methods:{
        getFormData() {
          // this.dataForm.deptId = this.userInfo.lessDeptId
          // this.spreadData.deptName = this.userInfo.lessDeptName
        },
        unitChangeHandle(val){
          let ids = []
          let names = []
          getDeptPage({current: 1,size: 100,unitId: val}).then(response => {
            if(response.data.code == '0'){
              let resultData = response.data.data.records
              resultData.forEach(item => {
                ids.push(item.id)
                names.push(item.name)
              })
              this.spreadData.deptName = names.join(',')
              this.spreadData.deptId = ids
              this.dataForm.deptId = ids
            }else{
              this.$message.error(response.data.msg)
            }
          })
        },
        getWorkParams() {
          if(this.spreadData.classify == '1' && this.spreadData.mode == '2'){
            params = '/work/saleByUser.cpt'
          }else if(this.spreadData.classify == '1' && this.spreadData.mode == '1'){
            params = '/work/saleByDept.cpt'
          }else if(this.spreadData.classify == '3' && this.spreadData.mode =='2'){
            params = '/work/saleByOptometry.cpt'
          }else if(this.spreadData.classify == '3' && this.spreadData.mode =='1'){
            params = '/work/saleByOptometryDept.cpt'
          }
            if(this.spreadData.deptId){
                this.dataForm.deptId=this.spreadData.deptId
            }
          let data = filterParams(this.dataForm)
          let parameter = ''
          for(let key in data){
            parameter += '&' + key + '=' + this.dataForm[key]
          }
          // let parameter = '&deptId='+this.dataForm.deptId + '&beginTime='+this.dataForm.beginTime+ '&endTime='+this.dataForm.endTime
          //let frUrl = "http://localhost:8075/webroot/decision/view/report?viewlet="
          //this.printUrl = frUrl + params + parameter
          this.printUrl = this.bizData.printUrl + params + parameter
        },
        //  查询公司列表
        getCompanyList() {
          unitList().then(response => {
            if(response.data.code == '0'){
              this.companyOption = response.data.data
            }else{
              this.$message.error(response.data.msg)
            }
          })
        },
        //  打开查询部门弹窗
        openDeptDialog() {
          this.deptVisible = true
          this.$nextTick(() => {
            this.$refs.deptDialog.init()
          })
        },
        //  获取选择部门数据
        getDeptData(data) {
          let ids = []
          let names = []
          if(data.length){
            data.forEach(item => {
              ids.push(item.id)
              names.push(item.name)
            })
          }
          this.spreadData.deptName = names.join(',')
          this.spreadData.deptId = ids
          this.dataForm.deptId = ids
        }
      }
    }
</script>
<style lang="scss" scoped>
  .bg-row {
    // background-color: #9ec0b0;
    padding-right: 15px;
    padding-top: 5px;
    margin-bottom: 2px;
  }
</style>
